<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue插槽</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <container>
            <x-head slot="hh-title" v-bind:title="a"></x-head>
            <c-foot slot="foo-title" v-bind:item="seen"></c-foot>
        </container>
       
      
    </div>
   
</body>
<script>
     Vue.component("container",{
        template: '<div><slot name="hh-title"></slot><slot name="foo-title"></slot></div>'
    })
    Vue.component("x-head",{
        props:["title"],
        template: '<div>{{title}}</div>'
    })
    Vue.component("c-foot",{
        props:["item"],
        template: '<div>{{item}}</div>'
    })
    var vm=new Vue({
        el:'#app',
        data:{
            a:'hello!',
            seen:"skyme"
            
        
            
        }
       
        
       
        
    //     created: function () {
    // // `this` 指向 vm 实例
    // console.log('a is: ' + this.a)
    //   } ,
    //      beforeUpdate(){
            
    //       console.log('有数据更新')},
    //       updated(){
    //         console.log('更新完毕')},

    //     beforeMount(){
    //         console.log('挂载前')
    //     },
    //     mounted(){
    //         setTimeout(()=>{
    //             this.a='change!';
    //         },2000)
            
            
    //     }	
    
    })
   
</script>
</html>